<template>
  <div id="category">
    <div
      ref="chart01"
      class="chart01"
      :xData="xData"
      :y1Data="y1Data"
      :y2Data="y2Data"
    ></div>
  </div>
</template>

<script>
export default {
  name: "Category",
  components: {},
  props: {
    xData: Array | Object,
    y1Data: Array | Object,
    y2Data: Array | Object,
    finishFlag: Boolean,
    name1: String,
    name2: String,
    name3: String,
    name4: String,
    formatter: String | Number //1:万/亿  2:%
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawChart01();
  },

  methods: {
    // 绘制图表
    drawChart01() {
      let that = this;
      let myChart1 = that.$echarts.init(that.$refs.chart01);
      // let myChart1 = that.$echarts.init(that.$refs[that.refId]);
      let option = {
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          //   label: {
          //     backgroundColor: "#6a7985",
          //   },
          // },
          // // 去掉标尺
          // axisPointer: {
          //   type: "none",
          // },
          axisPointer: {
            type: "line" // 默认为直线，可选为：'line' | 'shadow'
          }
          // formatter: function (params) {
          //   var result = "";
          //   if (that.formatter == 1) {
          //     params.forEach(function (item) {
          //       result +=
          //         item.marker +
          //         " " +
          //         item.seriesName +
          //         " : " +
          //         item.value +
          //         "</br>";
          //     });
          //   } else if (that.formatter == 2) {
          //     params.forEach(function (item) {
          //       result +=
          //         item.marker +
          //         " " +
          //         item.seriesName +
          //         " : " +
          //         item.value * 100 +
          //         "%" +
          //         "</br>";
          //     });
          //   }
          //   return params[0].name + "</br>" + result;
          // },
        },
        legend: {
          data: [that.name1, that.name2],
          itemGap: 20,
          textStyle: {
            color: "#888"
            // fontSize: 16,
          }
        },
        grid: {
          top: "15%", // 组件离容器上侧的距离,百分比字符串或整型数字
          left: "3%", // 组件离容器左侧的距离,百分比字符串或整型数字
          right: "5%",
          bottom: "3%",
          containLabel: true //grid 区域是否包含坐标轴的刻度标签，
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: that.xData,
          //设置网格线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#e5e5e5"],
              width: 1,
              type: "dashed"
            }
          },
          // x轴样式
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#555555", //左边线的颜色
              width: "1" //坐标线的宽度
            }
          },
          // x轴字体样式
          axisLabel: {
            margin: 14,
            show: true,
            textStyle: {
              color: "#555555",
              fontFamily: "DINAlternate-Bold",
              fontSize: 14
            }
          }
        },
        yAxis: [
          {
            name: that.name3,
            type: "value",
            // 设置网格线颜色
            splitLine: {
              show: true,
              lineStyle: {
                color: "#555555",
                width: 1,
                type: "dashed"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#555555",
                fontFamily: "DINAlternate-Bold",
                fontSize: 14
              },
              formatter: function(value) {
                if (that.formatter == 1) {
                  return that.format_num(value);
                } else if (that.formatter == 2) {
                  return value * 100 + "%";
                }
              }
            },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#555555", //左边线的颜色
                width: "1" //坐标线的宽度
              }
            }
          },
          {
            name: that.name4,
            // nameLocation: "start",
            type: "value",
            //设置网格线颜色
            splitLine: {
              show: true,
              lineStyle: {
                color: "#555555",
                width: 1,
                type: "dashed"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#555555",
                fontFamily: "DINAlternate-Bold",
                fontSize: 14
              },
              formatter: function(value) {
                if (that.formatter == 1) {
                  return that.format_num(value);
                } else if (that.formatter == 2) {
                  return value * 100 + "%";
                }
              }
            },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#555555", //左边线的颜色
                width: "1" //坐标线的宽度
              }
            }
          }
        ],
        series: [
          {
            name: that.name1,
            data: that.y1Data,
            type: "line",
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 6, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(253,127,44,0.5)"
                  },
                  {
                    offset: 1,
                    color: "rgba(255,255,255,0.5)"
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: "rgba(253,127,44,0.36)", //改变折线点的颜色
                shadowBlur: 16,
                shadowColor: "#fd7f2c",
                lineStyle: {
                  color: "#fd7f2c", //改变折线颜色
                  width: 3
                }
              }
            },
            yAxisIndex: 0
          },
          {
            name: that.name2,
            data: that.y2Data,
            type: "line",
            smooth: true, //true 为平滑曲线，false为直线
            symbolSize: 5, //折线点的大小
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(23,121,255,0.5)"
                  },
                  {
                    offset: 1,
                    color: "rgba(255,255,255,0.5)"
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: "rgba(23,121,255,0.36)", //改变折线点的颜色
                shadowBlur: 16,
                shadowColor: "#1779ff",
                lineStyle: {
                  color: "#1779ff", //改变折线颜色
                  width: 3
                }
              }
            },
            yAxisIndex: 1
          }
        ]
      };
      myChart1.setOption(option);
      myChart1.setOption({
        graphic: {
          type: "image",
          bounding: "raw",
          top: "60%",
          left: "15%",
          /* style: {
            image:
              "",
            width: "147",
            height: "32"
          } */
        }
      });
      /*窗口自适应，关键代码*/
      setTimeout(function() {
        window.addEventListener("resize", function() {
          myChart1.resize();
        });
      }, 200);

      // window.addEventListener("resize", function () {
      //   myChart1.resize();
      // });
    }
  }
};
</script>
<style lang="less" scoped>
#category {
  width: 100%;
  margin-top: 36px;
  .chart01 {
    width: 100%;
    height: 449px;
    overflow: hidden;
    clear: both;
  }
}
</style>
